<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="tgd/Utilities/Calendar/Month.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type='text/javascript' src="knockout-2.1.0.js"></script>
		<title>Calendar</title>

		<style type="text/css">
			html,body{width:100%;height:100%;font-size:18pt;margin:0;background:#000;font-family:consolas,"Lucida Console",monospace;}

			#header,#footer{text-align:center;background:#111;padding:5px;font-family:calibri,sans-serif;font-size:.8em;}
			#header{width:100%;border-collapse:collapse;color:#fff;}
			#header td{width:50%;vertical-align:center;}
			#footer{color:#999;}
			#footer .link{cursor:pointer;text-decoration:underline;color:#09c;}

			.next,.previous{cursor:pointer;padding:0 10px;color:#09c;}
			#monthselector .next,#monthselector .previous{position:absolute;}
			#monthselector .next{right:5px;}
			#monthselector .previous{left:5px;}
			.next:hover,.previous:hover{background:#333;}
			#monthselector{position:relative;}

			#cal{color:#555;border-left:solid 3px #111;border-right:solid 3px #111;width:100%;text-align:center;border-collapse:collapse;}
			#cal .weekdays{color:#999;background:#0a0a0a;}
			#cal td{width:14.25%;/* 1/7 */}
			.currentmonth{color:#fff;}
			.today{background:#09c;color:#000;}
		</style>

		<script type="text/javascript">
			$(function() {
				function CalendarViewModel() {
					var _monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
					var self = this;					
					self.year = ko.observable();
					self.month = ko.observable();  //int: 0-11
					self.weeks = ko.observableArray([]);

					self.updateCalendar = function() {
						var monthObject = new tgd.Utilities.Calendar.Month(self.year(), self.month());
						self.weeks (monthObject.getWeeks());
					}

					self.year.subscribe(function() {
						//TODO this will cause 2 calendar updates when month & year change
						self.updateCalendar();
					});

					self.month.subscribe(function() {
						//TODO this will cause 2 calendar updates when month & year change
						self.updateCalendar();
					});

					self.monthName = ko.computed(function() {
						return _monthNames[self.month()];
					}, self);

					self.prevMonth = function(){
						self.month((self.month() + 11) % 12);
						if (self.month() == 11) {  //last year
							self.prevYear();
						}
					}

					self.nextMonth = function(){
						self.month((self.month() + 1) % 12);
						if (self.month() == 0) {  //next year
							self.nextYear();
						}
					}

					self.prevYear = function(){
						self.year(self.year() - 1);
					}

					self.nextYear = function(){
						self.year(self.year() + 1);
					}

					self.today = function() {
						self.year(new Date().getFullYear());
						self.month(new Date().getMonth());
					}

					self.currentDate = ko.computed(function() {
						var d = new Date();
						return _monthNames[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
					});

					self.today();

					var refresh = function() {
						self.today();
						setTimeout(refresh, 86400000);
					}

					setTimeout(refresh, 86400000 - (new Date().getTime() - new Date(new Date().getFullYear(), new Date() .getMonth(), new Date().getDate())));
				}

				var obj = new CalendarViewModel();

				ko.applyBindings(obj);
			});
		</script>

	</head>
	<body>
		<table id="header">
			<tr>
				<td>
					<div id="monthselector">
						<span class="previous" data-bind="click:prevMonth">«</span>
						<span class="month" data-bind="text:monthName"></span>
						<span class="next" data-bind="click:nextMonth">»</span>
					</div>
				</td>
				<td>
					<div id="yearselector">
						<span class="previous" data-bind="click:prevYear">«</span>
						<span class="year" data-bind="text:year"></span>
						<span class="next" data-bind="click:nextYear">»</span>
					</div>
				</td>
			</tr>
		</table>
		<table id="cal">
			<tr class="weekdays">
				<td>S</td>
				<td>M</td>
				<td>T</td>
				<td>W</td>
				<td>T</td>
				<td>F</td>
				<td>S</td>
			</tr>
			<tbody data-bind="foreach:weeks">
				<tr data-bind="foreach:days">
					<td data-bind="text:day,css:{currentmonth: isCurrentMonth, today: isCurrentDay}"></td>
				</tr>
			</tbody>
		</table>
		<div id="footer">
			<span class="link" data-bind="click:today">Today</span> is <span data-bind="text:currentDate"></span>
		</div>
	</body>
</html>